<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>axios 创建对象发送请求</title>
  </head>
  <body>
    <button>点击获取段子</button>
    <button>点击获取英雄</button>
    <button>本地server</button>
    <!-- 
      接口1: http://api.xiaohigh.com/lol
      接口2: http://api.xiaohigh.com/duanzi

      接口3: http://127.0.0.1:8090/server
      接口4: http://127.0.0.1:8090/delay-server
    -->
    <!-- 
      问题: 一个前端项目中会使用到2个服务器提供的接口(基础地址不一样), 我不再通过axios
            来配置baseURL
      解决: 使用axios.create(config)来创建新的axios, 可以通过config给新的axios指定默认配置

      axios.create(config) 返回的是一个能发请求的函数
     -->


    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
    <script>
      // axios.defaults.baseURL = 'http://api.xiaohigh.com'  // 只能写一个, 不可以

      const axios2 = axios.create({
        baseURL: 'http://api.xiaohigh.com',
        timeout: 10 * 1000,
      })
      const axios3 = axios.create({
        baseURL: 'http://127.0.0.1:8090',
        timeout: 4 * 1000,
      })


      const btns = document.querySelectorAll('button')

      btns[0].onclick = async function () {
        const response = await axios2('/duanzi')
        console.log(response.data)
      }
      btns[1].onclick = async function () {
        const response = await axios2('/lol')
        console.log(response.data)
      }
      btns[2].onclick = async function () {
        const response = await axios3.get('/server')
        console.log(response.data)
      }
    </script>


  </body>
</html>
